/* 自定义暗黑模式样式 */
html.dark {
  --dark-main-bg-color: #141414;

  --dark-bg-color: #1f1f1f;

  --dark-border-color: #414243;

  --dark-text-color: #d9d9d9;

  --dark-shadow-color: 5px 5px 15px rgb(255 255 255 / 20%);

  --dark-scrollbar-bg-color: #686868;

  --zb-border-light: 1px solid #4c4d4f;

  /* 需要自定义覆盖的样式 */
  body {
    background-color: var(--dark-main-bg-color )!important;
    #driver-highlighted-element-stage {
      background-color: #525457 !important;
    }
  }

  /* layout-container */
  .layout-container {
    /* sider */
    .ant-layout-sider {
      border-right: 1px solid var(--dark-border-color) !important;
      .ant-menu {
        background-color: var(--dark-bg-color) !important;
        &::-webkit-scrollbar {
          background-color: var(--dark-bg-color) !important;
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--dark-scrollbar-bg-color )!important;
        }
      }
      .logo-box {
        background-color: var(--dark-bg-color) !important;
        border-bottom: 1px solid var(--dark-border-color) !important;
      }
    }

    /* layout */
    .ant-layout {
      background-color: var(--dark-main-bg-color) !important;
      .ant-layout-header,
      .tags-view,
      .footer,
      .card {
        background-color: var(--dark-bg-color) !important;
        border-color: var(--dark-border-color) !important;
        .text {
          color: var(--dark-text-color) !important;
        }
      }
      .ant-layout-header {
        height: 55px;
        padding: 0 40px 0 20px;
        .icon-style,
        .username {
          color: var(--dark-text-color) !important;
        }
      }
      .ant-layout-content {
        &::-webkit-scrollbar {
          background-color:var(--dark-main-bg-color) !important;
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--dark-scrollbar-bg-color) !important;
        }
        .card {
          &::-webkit-scrollbar {
            background-color: var(--dark-bg-color) !important;
          }
          &::-webkit-scrollbar-thumb {
            background-color: var(--dark-scrollbar-bg-color) !important;
          }
        }
      }
    }
  }
  .ant-drawer {
    .ant-drawer-body {
      .theme-item {
        color: var(--dark-text-color) !important;
      }
    }
  }
}
